<template>
  <div class="a-flex a-row-center a-col-center h430" v-if="$isEmpty(data.LevelVfyRfy)">
    <a-empty>
      <template #description>
        <p class="title">{{ options.title.text }}</p>
        <p class="text-secondary">暂无数据</p>
      </template>
    </a-empty>
  </div>
  <echartsView v-else :loading="loading" :options="options" class="h430"></echartsView>
</template>

<script>
import { echartsView } from '@/components'
export default {
  components: {
    echartsView,
  },
  props: {
    data: {
      required: true,
      type: Object,
      default: () => {},
    },
  },
  watch: {
    data: {
      deep: true,
      immediate: true,
      handler(n) {
        if (!this.$isEmpty(n)) {
          this.setOptions()
        }
      },
    },
  },
  data() {
    return {
      loading: false,
      options: {
        title: {
          text: '各级待审批',
          x: 'center',
        },
        grid: {
          left: 0,
          right: 0,
          bottom: 0,
          containLabel: true,
        },
        tooltip: {
          trigger: 'item',
        },
        legend: {
          orient: 'vertical',
          left: 'left',
        },
        series: [
          {
            name: '各级待审批',
            type: 'pie',
            radius: '70%',
            data: [],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)',
              },
            },
          },
        ],
      },
    }
  },
  methods: {
    setOptions() {
      const { LevelVfyRfy, UserTitle } = this.data
      const title = UserTitle.split(',')
      this.options.title.text = title[2]
      this.options.series[0].name = title[2]
      this.loading = true
      this.options.series[0].data = LevelVfyRfy.map((e) => ({
        value: e.Count,
        name: e.Level,
      }))
      this.loading = false
    },
  },
}
</script>
<style lang="less" scoped>
.title {
  font-weight: 700;
  font-size: 20px;
}
.h430 {
  height: 430px !important;
}
</style>
